<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery的引入</title>
    <script src="jquery-3.4.1.min.js" type="text/javascript"></script>
    <style>
        .real {
            display: none;
        }
    </style>
</head>
<body>
<div><h2>沁园春·雪</h2>
    <div>[现代] 毛泽东</div>
    <div>北国风光，千里冰封，万里雪飘。</div>
    <div>望长城内外，惟余莽莽；</div>
    <div>大河上下，顿失滔滔。</div>
    <div>山舞银蛇，原驰蜡象，欲与天公试比高。</div>
    <div>须晴日，看红妆素裹，分外妖娆。</div>
<!--#和javascript:都可以阻止页面刷新-->
    <a href="#" class="more">更多</a>
    <div class="real">
        <div> 江山如此多娇，</div>
        <div>引无数英雄竞折腰。</div>
        <div>惜秦皇汉武，略输文采；</div>
        <div>唐宗宋祖，稍逊风骚。</div>
        <div> 一代天骄，成吉思汗，只识弯弓射大雕。</div>
        <div> 俱往矣，数风流人物，还看今朝。</div>
        <a href="javascript:" class="pull">收起</a>
    </div>

</div>
<hr />
<!--操作DOM
html();常用，可以解析HTML代码
text();不常用，不能解析HTML代码
-->
<div>
    <h3>todoList</h3>
    <input id="input" type="text"/> <button id="add">添加</button>
    <ul id="list">
    </ul>
</div>
<hr />
<div><input type="password" id="password" /><button id="show-password">显示密码</button></div>
<script>
    let flag=true;//判断显示密码和隐藏密码
    $('#show-password').click(function (){
        if(flag===true){
            $('#password').attr('type','text');//改变属性
            $('#show-password').text('隐藏密码');
            flag=false;
        }else {
            $('#password').attr('type','password');//改变属性
            $('#show-password').text('显示密码');
            flag=true;
        }
    });


    $('#add').click(function (){//点击添加按钮
      let value=  $('#input').val();//无参数表示获取输入框的值
        if(value===""){//非空验证
            alert('内容不能为空！');
        }else{
            $('#list').html(
                $('#list').html()+
                '<li>' + $('#input').val() + '</li>'//把获取到的值添加到列表
            );
            $('#input').val(""); //清空输入框
        }
    });


    $('.more').click(function (){//点击更多
        $('.real').css('display','inline');//展示隐藏的诗句
        $('.more').css('display','none'); //隐藏“更多”两个字

    });
    $('.pull').click(function (){//点击收起
        $('.real').css('display','none');//隐藏诗句
        $('.more').css('display','inline');//显示“更多”两个字
    });

</script>
</body>
</html>